// 入口函数：
$(function () {
   statistical();  // 数据统计
   trend_chart();  // 趋势图
   pic_chart();    // 饼状图
   column_chart(); // 柱状图
});

// 数据统计
function statistical() {
   myAjax('/admin/data/info', 'GET', null, function (res) {
      // console.log(res);

      $('.spannel em').html(res.totalArticle)
      $('.spannel.scolor01 em').html(res.dayArticle)
      $('.spannel.scolor02 em').html(res.totalComment)
      $('.spannel.scolor03 em').html(res.dayComment)
   })
}

// 趋势图
function trend_chart() {
   myAjax('/admin/data/article', 'get', null, function (res) {
      // console.log(res);
      if (res.code != 200) {
         $('#curve_show').html('获取失败')
         return;
      }

      let dates = res.date.map(item => item.date);
      let counts = res.date.map(item => item.count);

      // Echarts：
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('curve_show'));

      // 指定图表的配置项和数据
      let option = {
         title: {
            text: '每日新增文章趋势',
            subtext: '数据来自大事件库',
            left: 'center',
            align: 'right'
         },
         // 鼠标经过展示信息：
         tooltip: {
            trigger: 'axis',
            axisPointer: {
               type: 'cross',
               label: {
                  backgroundColor: '#6a7985'
               }
            }
         },
         xAxis: {
            name: '日期',
            type: 'category',
            boundaryGap: false,
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            data: dates
         },
         yAxis: {
            name: '数量',
            type: 'value'
         },
         series: [{
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            data: counts,
            type: 'line',
            // 折线变得圆润：
            smooth: true,
            // 图表背景颜色：
            areaStyle: {
               color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                     offset: 0, color: 'pink' // 0% 处的颜色
                  }, {
                     offset: 1, color: 'skyblue' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
               }
            },
            // 折线颜色：
            lineStyle: {
               color: 'orange'
            }
         }]
      };


      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
   })
}

// 分类饼状图
function pic_chart() {
   myAjax('/admin/data/category', 'GET', null, function (res) {
      if (res.code != 200) {
         $('#pie_show').html('获取数据失败');
      }
      // console.log(res.date);
      let datas = [];
      let names = [];
      res.date.forEach(item => {
         datas.push({ 'name': item.name, 'value': item.articles });
         names.push(item.name);
      });

      // Echarts：
      let myChart = echarts.init(document.getElementById('pie_show'));
      option = {
         // 标题：
         title: {
            text: '各类型文章数量统计',
            left: 10,
         },
         // 鼠标经过详情：
         tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
         },
         // 数据成员：
         legend: {
            bottom: 4,
            left: 'center',
            data: names
         },
         // 饼状图主体：
         series: [
            {
               type: 'pie',
               radius: '65%',
               center: ['60%', '45%'],
               selectedMode: 'single',
               data: datas
            }
         ]
      };
      myChart.setOption(option);
   });
}

// 柱状图
function column_chart() {
   myAjax('/admin/data/visit', 'GET', null, function (res) {
      if (res.code != 200) {
         $('#column_show').html('内容获取失败');
      }
      // console.log(res.data);
      let days = [];
      let datas = [];
      for (let key in res.data) {
         days.push(key);
         datas.push(res.data[key]);
      };

      // Echarts：
      let myChart = echarts.init(document.getElementById('column_show'));
      option = {
         // 标题：
         title: {
            text: '日文章访问量',
            left: 'center',
            top: 10
         },
         color: ['#3398DB'],
         tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
               type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
         },
         grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
         },
         xAxis: [
            {
               type: 'category',
               data: days,
               axisTick: {
                  alignWithLabel: true
               }
            }
         ],
         yAxis: [
            {
               type: 'value'
            }
         ],
         visualMap: {
            top: 10,
            right: 10,
            pieces: [{
               gt: 0,
               lte: 3000,
               color: '#ffff0031'
            }, {
               gt: 3000,
               lte: 6000,
               color: '#acff2f6c'
            }, {
               gt: 6000,
               lte: 9000,
               color: '#ffa600'
            }, {
               gt: 9000,
               lte: 12000,
               color: '#ff3c00'
            }, {
               gt: 12000,
               lte: 15000,
               color: '#ff0000'
            }, {
               gt: 15000,
               color: '#7e0023'
            }],
            outOfRange: {
               color: '#999'
            }
         },
         series: [
            {
               name: '直接访问',
               type: 'bar',
               barWidth: '40%',
               data: datas
            }
         ]
      };
      myChart.setOption(option);
   })
}